<template>
	<el-container style="min-height:100vh;">
		<el-header class="headerstyle" style="height:70px">
		<el-row>
			<el-col :span="5">
				<span class="title"><strong>智能充电桩日志系统</strong> </span>
				<span v-if="iscollapse===true" @click="handleCollapse" style="margin-left:20px"> <i class="el-icon-d-arrow-right"></i></span>
				<span v-if="iscollapse===false" @click="handleCollapse" style="margin-left:20px"><i class="el-icon-d-arrow-left"></i></span>		   
			</el-col>
			<el-col :span="19" class="icon-setting"><i class="el-icon-back" @click="signOut"></i> 退出</el-col>
		</el-row>
	</el-header>
		<el-container>
			<el-col :span="iscollapse ? 1 : 4">			
				<el-aside style="width:180px" class="asidestyle">
					<!-- * default-active：表示当前active的菜单项的编号 
					* index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记-->
					<el-menu :default-active="$router.path" @select="handleSelect" :collapse="iscollapse" background-color="#fff" text-color="#000"
		active-text-color="#2073c1" class="el-menu-vertical-demo">
						<el-menu-item index="1"><i class="el-icon-document"></i><span>日志</span></el-menu-item>
						<el-menu-item index="2"><i class="el-icon-picture"></i><span>echart图表</span></el-menu-item>
						<el-submenu index="3">
							<template slot="title"><i class="el-icon-menu"></i><span>命令</span></template>
							<el-menu-item-group>
								<el-menu-item index="3-1"><i class="el-icon-view"></i> 管理命令</el-menu-item>
								<el-menu-item index="3-2"><i class="el-icon-edit"></i> 新建命令</el-menu-item>
							</el-menu-item-group>
							
						</el-submenu>
						
						<el-menu-item index="5"><i class="el-icon-upload"></i><span>模拟发送</span></el-menu-item>
					</el-menu>
				</el-aside>
			</el-col>
			<el-col :span="iscollapse ? 23 : 20">			
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-col>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			iscollapse:true,
		};
	},
	methods: {
		handleSelect(key, keyPath) {
			switch (key.toString()) {
				case "1":
					this.$router.push("/gatewaytable");
					break;
				case "2":
					this.$router.push("/chartshow");
					break;
				case "3-1":
					this.$router.push("/commandmanage");
					break;
				case "3-2":
					this.$router.push("/commandadd");
					break;
				case "5":
					this.$router.push("/monitorrole");
					break;
			}
		},
		signOut(){
			this.$router.push('/login');
			localStorage.removeItem('token');
		},
		handleCollapse(){
			this.iscollapse = !this.iscollapse;
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    /* min-height: 400px; */
  }
.headerstyle{
	/* border-radius: 5px; */
	background: #303133;
	color: #F2F6FC;
}
.asidestyle{
	background-color:#fff;
	text-align:left;
}
.menu {
	height: 100%;
}
.title{
	font-size: 20px;
	border: 12px;
	border-color: rgb(3, 12, 20);
}
.icon-setting{
	text-align: right;
}
</style>
